<script setup lang='ts'>
import qr from 'qrcode'
import { NSelect, NSkeleton } from 'naive-ui'
import { ref } from 'vue'
import service from '@/utils/request/axios'
import { t } from '@/locales'

const is_loading = ref(true)
const src = ref('')
const value = ref(2)
const options = [
  {
    label: '1 元',
    value: 1,
  },
  {
    label: '2 元',
    value: 2,
  },
]

function getQRCode(value: string) {
  is_loading.value = true
  service.post(`key/preCreateScanCodeTrade?total_amount=${value}`).then(async (result) => {
    src.value = await qr.toDataURL(result.data.alipay_trade_precreate_response.qr_code)

    is_loading.value = false
  })
}
getQRCode('2')
</script>

<template>
  {{ t('請根據次數選擇支付金額') }}
  <NSelect v-model:value="value" :options="options" @update-value="getQRCode" />
  <NSkeleton v-show="is_loading" height="200px" width="200px" />
  <img v-show="!is_loading" :src="src">
</template>

<style>

</style>
